<script setup lang="ts">
import { ref, watchEffect, onMounted } from 'vue';
import { useRouter, useRoute, RouteRecordRaw } from 'vue-router';

const Router = useRouter()
const Route = useRoute()

const path = ref('/')

const menuList = ref([] as Router_men_Item[])

const ComputedMenuList = async () => {
  await Router.isReady()
  menuList.value = []
  path.value = Route.path
  const routesLocal = Router.options.routes
  if (routesLocal) {
    routesLocal.forEach((item: RouteRecordRaw) => {
        const menu:Router_men_Item = {
          path: item.path,
          name: item.name as string,
          activeMenu: item.path == path.value,
          isOpen: false,
          children: [],
          meta: item.meta
        }
        if (item.children) {
          item.children.forEach((child: RouteRecordRaw) => {
            if (child.path == path.value) menu.isOpen = true
            menu.children?.push({
              path: child.path,
              activeMenu: child.path == path.value,
              isOpen: false,
              children: [],
              name: child.name as string,
              meta: child.meta
            })
          })
        }
        menuList.value.push(menu)
      }
    )
  }
}
onMounted(() => {
  ComputedMenuList()
})

const showOrTo = (router: Router_men_Item) => {
  if (router.children.length > 0) {
    router.isOpen = !router.isOpen
  } else {
    Router.push({name: router.name})
  }
}

watchEffect(() => {
  if (path.value != Route.path) {
    ComputedMenuList()
  }
})
</script>

<template>
  <div class="bg-gray-800 h-screen w-64 px-4 py-8">
    <nav>
      <div v-for="(routerList,index) in menuList" :key="index">
        <button class="flex items-center justify-between w-full px-4 py-2 text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700" @click="showOrTo(routerList)">
          <span>{{routerList.name}}</span>
          <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-if="routerList.children.length > 0">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div v-if="routerList.children" :class="[!routerList.isOpen ? 'hidden': '']" class="px-4 py-2">
          <div v-for="(routerChild, childIndex) in routerList.children" :key="childIndex"  @click="showOrTo(routerChild)" class="block text-white hover:bg-gray-700 px-2 py-1 rounded">
            <button class="flex items-center justify-between w-full px-4 py-2 text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700" @click="showOrTo(routerChild)">
              <span>{{routerChild.name}}</span>
              <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-if="routerChild.children.length > 0">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<style scoped lang="scss">
</style>